﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>字典明细管理</title>
    <#-- F基于文件的相对路径来找寻，不是基于容器-->
    <#include  "../common/link.ftl" >
    <script>
        $(function () {
            /*点击添加按钮，用过点击事件弹出模态框*/
            $(".btn-input").click(function () {
                /*清除模态框内容*/
                $("#editForm input").val('');
                /*var name = $(this).data("name");
                var sn = $(this).data("sn");
                console.log(name,sn);*/
                /*获取json数据*/
                var json = $(this).data("json");

                //把目录的名字设置到模态框的目录名字INPUT中
                $('#parentName').val($('a[data-id=${qo.parentId}]').text())
                //给隐藏的INPUT赋值
                $('#parentId').val(${qo.parentId})
                console.log(json);
                /*将数据显示在模态框中*/
                if(json){
                    $("#editForm input[name=id]").val(json.id)
                    $("#editForm input[name=title]").val(json.title)
                    $("#editForm input[name=sequence]").val(json.sequence)
                }
                $('#myModal').modal("show");
            })

            $('.btn-delete').click(function () {
                var json = $(this).data("json");
                    $.messager.confirm("警告!","确定要删除吗???",function() {
                    $.post("/systemDictionaryItem/delete.do","id="+json.id,function (data) {
                        if(data.success){
                            $.messager.popup("操作成功~")
                            window.setTimeout(function () {
                                window.location.reload();
                            },2000)
                        }
                    })
                })
            })
            /*
            * 使用jQuery-form 表单插件来完成提交。此插件也是异步传输。有表单的时候才能用此插件
            * 表单中的form标签中要设置action和method属性 辅助插件来完成提交方式和路径
            */


            /*点击保存按钮*/
            $(".btn-submit").click(function () {
                $("#editForm").ajaxSubmit(function(data) {
                    console.log(data)
                    if (data.success) {
                        /*重新加载页面*/
                        $.messager.popup("温馨提示：操作成功了呢~ 2s 后自动关闭");
                        window.setTimeout(function () {
                            window.location.href="/systemDictionaryItem/list.do";
                        }, 2000);
                    } else {
                        $.messager.popup("不对劲！！");
                    }
                });
            })
        })
    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <#include  "../common/navbar.ftl" >
    <!--菜单回显-->
    <#assign currentMenu="systemDictionaryItem"/>
    <#include  "../common/menu.ftl" >
    <div class="content-wrapper">
        <section class="content-header">
            <h1>字典明细</h1>
        </section>
        <section class="content">
            <div class="box">
                <div class="row" style="margin: 20px">
                    <div class="col-xs-3">
                        <div class="panel panel-default">
                            <div class="panel-heading">字典目录</div>
                            <div class="panel-body">
                                <div class="list-group">
                                    <#list systemDictionarys as dic>
                                        <a data-id="${dic.id}" href="/systemDictionaryItem/list.do?parentId=${dic.id}"
                                           class="list-group-item">${dic.title!}</a>
                                    </#list>
                                    <#--//回显一个样式，点击哪个，哪个就背景变色。否则分不清你点的是哪个选项-->
                                    <script>
                                        $("a[data-id=${qo.parentId}]").addClass('active');
                                    </script>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-9">
                <!--高级查询--->
                <form class="form-inline" id="searchForm" action="/systemDictionaryItem/list.do" method="post">
                    <input type="hidden" name="currentPage" id="currentPage" value="1">
                    <#--每次点击字典目录时。会显示当前目录的子明细，在点击子明细下一页是，要传递，parentId-->
                    <input type="hidden" name="parentId" value="${qo.parentId}">
                    <a href="#" class="btn btn-success btn-input" style="margin: 10px">
                        <span class="glyphicon glyphicon-plus"></span> 添加
                    </a>
                </form>
                <!--编写内容-->
                <div class="box-body table-responsive no-padding ">
                    <table class="table table-hover table-bordered">
                        <tr>
                            <th>编号</th>
                            <th>标题</th>
                            <th>序号</th>
                            <th>操作</th>
                        </tr>
                        <#list result.list as entity>
                            <tr>
                                <td>${entity_index+1}</td>
                                <td>${(entity.title)!}</td>
                                <td>${(entity.sequence)!}</td>
                                <td>
                                    <#--使用data-* 来绑定自定义数据，-->
                                    <#--<a href="#" class="btn btn-info btn-xs btn-input"
                                       data-name="${entity.id}" data-sn="${entity.sn}">
                                        <span class="glyphicon glyphicon-pencil"></span> 编辑
                                    </a>-->
                                    <#--JSON来整体打包传送 data-json='${entity.json}'-->
                                    <a href="#" class="btn btn-info btn-xs btn-input"
                                       data-json='${(entity.json)!}'>
                                        <span class="glyphicon glyphicon-pencil"></span> 编辑
                                    </a>
                                    <a href="#" class="btn btn-danger btn-xs btn-delete" data-json='${(entity.json)}' id="deleteId">
                                        <span class="glyphicon glyphicon-pencil"></span> 删除
                                    </a>
                                </td>
                            </tr>
                        </#list>
                    </table>
                    <!--分页-->
                    <#include  "../common/page.ftl">
                </div>
            </div>
                </div>
            </div>
        </section>
    </div>
    <#include  "../common/footer.ftl" >
</div>


<#--模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                <h4 class="modal-title" id="myModalLabel">新增/编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="/systemDictionaryItem/saveOrUpdate.do" method="post" id="editForm">
                    <input type="hidden" name="id">
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="name" class="col-sm-3 control-label">字典目录：</label>
                        <div class="col-sm-6">
                            <#--给用户看-->
                            <input type="text" value="" class="form-control" readonly id="parentName" name="parentName"
                                   placeholder="请输入字典目录"  />
                            <#--用来提交到后台进行传递用的-->
                            <input type="hidden" class="form-control" id="parentId" name="parentId">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="sn" class="col-sm-3 control-label">明细标题：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="title" name="title"
                                   placeholder="请输入明细标题">
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="sn" class="col-sm-3 control-label">明细序号：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="sequence" name="sequence"
                                   placeholder="请输入明细序号">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-submit">保存</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>
